﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>书籍详情</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico in the root directory -->
        <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

		<!-- CSS here -->
        <link rel="stylesheet" href="assets/css/preloader.css">
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/slick.css">
        <link rel="stylesheet" href="assets/css/backToTop.css">
        <link rel="stylesheet" href="assets/css/meanmenu.css">
        <link rel="stylesheet" href="assets/css/nice-select.css">
        <link rel="stylesheet" href="assets/css/magnific-popup.css">
        <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
        <link rel="stylesheet" href="assets/css/animate.min.css">
        <link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
        <link rel="stylesheet" href="assets/css/fontAwesome5Pro.css">
        <link rel="stylesheet" href="assets/css/ui-range-slider.css">
        <link rel="stylesheet" href="assets/css/default.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <style>
            .my-font-weight{
                font-weight: 700;
            }
            .my-size{
                width: 80%;
                padding: 0 20px;
            }
        </style>
    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <!-- Add your site or application content here -->

        <!-- preloader area start -->
        <div id="loading">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div id="object"></div>
                </div>
            </div>
        </div>
        <!-- preloader area end -->

        <!-- back to top start -->
        <div class="progress-wrap">
            <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
            </svg>
        </div>
        <!-- back to top end -->

        <!-- 页面头 start -->
        <header>
            <div class="header__area">
                <div class="header__top header__padding d-none d-sm-block">
                    <div class="container-fluid">
                        <div class="row align-items-center">
                            <div class="col-xl-6 col-lg-6 col-md-5 d-none d-md-block">
                                <div class="header__welcome">
                                    <span>欢迎来到二手书籍交易平台商品详情页面</span>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-7">
                                <div class="header__action d-flex justify-content-center justify-content-md-end">
                                    <ul>
                                        <li class="d-none d-xl-inline-block">
                                            <a th:if="${session.loginUser!=null}" href="javascript:;" th:text="${session.loginUser==null?'':session.loginUser.nickname}"></a>
                                            <a th:if="${session.loginUser==null}" href="http://huyulu666.top/login.html">登录/注册</a>
                                        </li>
                                        <li><a href="http://huyulu666.top:81/">个人信息管理中心</a></li>
                                        <li><a href="http://huyulu666.top/center.html">我的订单</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- 页面头 end -->

        <!-- offcanvas area start -->
        <div class="offcanvas__area">
            <div class="offcanvas__wrapper">
            <div class="offcanvas__close">
                <button class="offcanvas__close-btn" id="offcanvas__close-btn">
                    <i class="fal fa-times"></i>
                </button>
            </div>
            <div class="offcanvas__content">
                <div class="offcanvas__logo mb-40">
                    <a href="index.html">
                    <img src="assets/img/logo/logo-black.png" alt="logo">
                    </a>
                </div>
                <div class="offcanvas__search mb-25">
                    <form action="#">
                        <input type="text" placeholder="What are you searching for?">
                        <button type="submit" ><i class="far fa-search"></i></button>
                    </form>
                </div>
                <div class="mobile-menu-2 fix"></div>
                <div class="offcanvas__action">

                </div>
            </div>
            </div>
        </div>
        <!-- offcanvas area end -->      
        <div class="body-overlay"></div>
        <!-- offcanvas area end -->

        <main>
            
            <!-- 首页->书籍详情 start -->
            <section class="breadcrumb__area box-plr-75">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xxl-12">
                            <div class="breadcrumb__wrapper">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                      <li class="breadcrumb-item"><a href="/index.html">首页</a></li>
                                      <li class="breadcrumb-item active" aria-current="page">书籍详情</li>
                                    </ol>
                                  </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 首页->书籍详情 end -->

            <!-- 书籍信息主体部分 start -->
            <section class="product__area box-plr-75 pb-70">
                <div class="container-fluid">
                    <div class="row">
                        <!-- 书籍图片 -->
                        <div class="col-xxl-5 col-xl-5 col-lg-5">
                            <div class="product__details-nav d-sm-flex align-items-start">
                                <ul class="nav nav-tabs flex-sm-column justify-content-between" id="productThumbTab" role="tablist">
                                    <!-- 动态添加的内容 -->
                                </ul>
                                <div class="product__details-thumb my-size">
                                    <div class="tab-content" id="productThumbContent">
                                        <!-- 动态添加的内容 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 书籍详细信息 -->
                        <div class="col-xxl-7 col-xl-7 col-lg-7">
                            <div class="product__details-wrapper">
                                <div class="product__details">
                                    <!-- 书籍标题 -->
                                    <h3 class="product__details-title my-font-weight" th:text="${bookItem.bookName}"></h3>
                                    <!-- 评价星级 -->
                                    <div class="product__review d-sm-flex">
                                        <div class="rating rating__shop mb-15 mr-35">
                                            <ul>
                                                <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                <li><a href="#"><i class="fal fa-star"></i></a></li>
                                            </ul>
                                        </div>
                                        <div class="product__add-review mb-15">
                                        <span><a href="javascript:;">1 个评价</a></span>
                                        <span><a href="javascript:;">添加评价</a></span>
                                        </div>
                                    </div>
                                    <!-- 价格 -->
                                    <div class="product__price">
                                        <span class="new" th:text="'￥' + ${bookItem.bookPrice}"></span>
                                        <span class="old" th:text="'￥' + ${bookItem.bookOriginalPrice}"></span>
                                    </div>
                                    <!-- 书籍类型 -->
                                    <div class="product__stock">
                                        <span>书籍类型：</span>
                                        <span th:text="${bookItem.bookTypeName}"></span>
                                    </div>
                                    <!-- 新旧程度 -->
                                    <div class="product__stock sku mb-30">
                                        <span>新旧程度：</span>
                                        <span th:text="${bookItem.bookLevel} == 10 ? '全新' : ${bookItem.bookLevel}+' 成新'"></span>
                                    </div>
                                    <!-- 描述 -->
                                    <div class="product__details-des mb-30">
                                        <p th:text="${bookItem.bookDesc}"></p>
                                    </div>
                                    <!-- 备注 -->
                                    <div class="product__details-des mb-30">
                                        <p th:text="'备注：'+${bookItem.remark}"></p>
                                    </div>
                                    <!-- 数量 -->
                                    <div class="product__details-stock">
                                        <h3><span>赶快抢购！</span> 书籍数量仅剩 <b th:text="${bookItem.bookCount}" style="color: red"></b> 件</h3>
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" data-width="100%"></div>
                                          </div>
                                    </div>
                                    <!-- 添加到购物车按钮 -->
                                    <div class="product__details-quantity mb-20">
                                        <form action="http://huyulu666.top/addToCart.html">
                                            <input name="bookId" type="text" th:value="${bookItem.id}" style="display: none"/>
                                            <div class="pro-quan-area d-lg-flex align-items-center">
                                                <div class="product-quantity mr-20 mb-25">
                                                    <div class="cart-plus-minus p-relative">
                                                        <input name="count" type="text" value="1" />
                                                    </div>
                                                </div>
                                                <div class="pro-cart-btn mb-25">
                                                    <button class="t-y-btn my-font-weight" type="submit">添加到购物车</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- 四大按钮：喜欢、比较、输出、分享 -->
                                    <div class="product__details-action">
                                        <ul>
                                            <li><a href="javascript:;" th:onclick="addToLikes([[${bookItem.id}]])" title="添加到喜欢"><i class="fal fa-heart"></i></a></li>
                                            <li><a href="javascript:;" title="比较"><i class="far fa-sliders-h"></i></a></li>
                                            <li><a href="javascript:;" title="分享"><i class="fal fa-share-alt"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 下方两个部分的按钮 -->
                    <div class="row">
                        <div class="col-xxl-12">
                            <div class="product__details-des-tab mb-40 mt-110">
                                <ul class="nav nav-tabs" id="productDesTab" role="tablist">
                                    <!--<li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="true">
                                            评价 5
                                        </button>
                                    </li>-->
                                    <li class="nav-item" role="presentation">
                                      <button class="nav-link active" id="des-tab" data-bs-toggle="tab" data-bs-target="#des" type="button" role="tab" aria-controls="des" aria-selected="true">
                                            留言 [[${bookMessage.totalCount}]]
                                      </button>
                                    </li>
                                  </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 下方评价和描述部分 -->
                    <div class="row">
                        <div class="col-xxl-12">
                            <div class="tab-content" id="prodductDesTaContent">
                                <!-- 评价页 -->
                                <!--<div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                                    <div class="product__details-review">
                                        <div class="row">
                                            <div class="col-xxl-6 col-xl-6 col-lg-6">
                                                <div class="review-wrapper">
                                                    <h3 class="block-title">顾客评价</h3>
                                                    &lt;!&ndash; 评价项 &ndash;&gt;
                                                    <div class="review-item">
                                                        &lt;!&ndash; 评价标题 &ndash;&gt;
                                                        <h3 class="review-title">Awesome product</h3>
                                                        &lt;!&ndash; 评价星级 &ndash;&gt;
                                                        <div class="review-ratings mb-10">
                                                            <div class="review-ratings-single d-flex align-items-center">
                                                                <span>Quality</span>
                                                                <ul>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                </ul>
                                                            </div>
                                                            <div class="review-ratings-single d-flex align-items-center">
                                                                <span>Price</span>
                                                                <ul>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                </ul>
                                                            </div>
                                                            <div class="review-ratings-single d-flex align-items-center">
                                                                <span>Value</span>
                                                                <ul>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        &lt;!&ndash; 评价内容 &ndash;&gt;
                                                        <div class="review-text">
                                                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti quia eligendi molestias illum libero et.</p>
                                                        </div>
                                                        &lt;!&ndash; 评价者和评价时间 &ndash;&gt;
                                                        <div class="review-meta">
                                                            <div class="review-author">
                                                                <span>Review By </span>
                                                                <span>Shahnewaz Sakil</span>
                                                            </div>
                                                            <div class="review-date">
                                                                <span>Posted on</span>
                                                                <span>1/21/20</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="review-item">
                                                        <h3 class="review-title">Nice</h3>
                                                        <div class="review-ratings mb-10">
                                                            <div class="review-ratings-single d-flex align-items-center">
                                                                <span>Quality</span>
                                                                <ul>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                </ul>
                                                            </div>
                                                            <div class="review-ratings-single d-flex align-items-center">
                                                                <span>Price</span>
                                                                <ul>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                </ul>
                                                            </div>
                                                            <div class="review-ratings-single d-flex align-items-center">
                                                                <span>Value</span>
                                                                <ul>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="review-text">
                                                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti quia eligendi molestias illum libero et.</p>
                                                        </div>
                                                        <div class="review-meta">
                                                            <div class="review-author">
                                                                <span>Review By </span>
                                                                <span>Selena Gomz</span>
                                                            </div>
                                                            <div class="review-date">
                                                                <span>Posted on</span>
                                                                <span>1/21/20</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="review-item">
                                                        <h3 class="review-title">Best product</h3>
                                                        <div class="review-ratings mb-10">
                                                            <div class="review-ratings-single d-flex align-items-center">
                                                                <span>Quality</span>
                                                                <ul>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                </ul>
                                                            </div>
                                                            <div class="review-ratings-single d-flex align-items-center">
                                                                <span>Price</span>
                                                                <ul>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                </ul>
                                                            </div>
                                                            <div class="review-ratings-single d-flex align-items-center">
                                                                <span>Value</span>
                                                                <ul>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                    <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="review-text">
                                                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti quia eligendi molestias illum libero et.</p>
                                                        </div>
                                                        <div class="review-meta">
                                                            <div class="review-author">
                                                                <span>Review By </span>
                                                                <span>Jonson</span>
                                                            </div>
                                                            <div class="review-date">
                                                                <span>Posted on</span>
                                                                <span>1/21/20</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xxl-4 col-xl-4 col-lg-4">
                                                <div class="review-form">
                                                    <h3>Your Reviewing</h3>
                                                    <p>Australian Certified Organic Royal Gala Apples</p>
                                                    <form action="#">
                                                        <div class="review-input-box mb-15 d-flex align-items-start">
                                                            <h4 class="review-input-title">Your Rating</h4>
                                                            <div class="review-input">
                                                                <div class="review-ratings mb-10">
                                                                    <div class="review-ratings-single d-flex align-items-center">
                                                                        <span>Quality</span>
                                                                        <ul>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                        </ul>
                                                                    </div>
                                                                    <div class="review-ratings-single d-flex align-items-center">
                                                                        <span>Price</span>
                                                                        <ul>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                        </ul>
                                                                    </div>
                                                                    <div class="review-ratings-single d-flex align-items-center">
                                                                        <span>Value</span>
                                                                        <ul>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="review-input-box d-flex align-items-start">
                                                            <h4 class="review-input-title">Nickname</h4>
                                                            <div class="review-input">
                                                                <input type="text" required>
                                                            </div>
                                                        </div>
                                                        <div class="review-input-box d-flex align-items-start">
                                                            <h4 class="review-input-title">Summary</h4>
                                                            <div class="review-input">
                                                                <input type="text" required>
                                                            </div>
                                                        </div>
                                                        <div class="review-input-box d-flex align-items-start">
                                                            <h4 class="review-input-title">Review</h4>
                                                            <div class="review-input">
                                                                <textarea></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="review-sub-btn">
                                                            <button type="submit" class="t-y-btn t-y-btn-grey">submit review</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>-->
                                <!-- 留言 -->
                                <div class="tab-pane fade show active" id="des" role="tabpanel" aria-labelledby="des-tab">
                                    <div class="product__details-review">
                                        <div class="row">
                                            <div class="review-wrapper" style="margin-bottom: 30px;">
                                                <h3 class="block-title">用户留言</h3>
                                                <!-- 留言项 -->
                                                <div class="review-item" th:each="message:${bookMessage.messages}">
                                                    <!-- 留言用户昵称 -->
                                                    <!--<h3 class="review-title" th:text="${message.nickname} + '：'"></h3>-->
                                                    <!-- 留言内容 -->
                                                    <div class="review-text">
                                                        <p th:text="${message.content}"></p>
                                                    </div>
                                                    <!-- 留言者和留言时间 -->
                                                    <div class="review-meta">
                                                        <div class="review-author">
                                                            <span></span>
                                                            <span th:text="${message.nickname}" style="font-size: 12px"></span>
                                                        </div>
                                                        <div class="review-date">
                                                            <span></span>
                                                            <span th:text="${message.getMessageTimeChina()}" style="font-size: 12px"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <form action="/comment.html" method="post">
                                        <input type="hidden" name="parent" value="0">
                                        <input type="hidden" name="bookId" th:value="${bookItem.id}">
                                        <input type="hidden" name="messageType" value="0">
                                        <div class="review-input-box">
                                            <h4 class="review-input-title">留言</h4>
                                            <div class="review-input">
                                                <textarea style="width: 100%;" name="content"></textarea>
                                            </div>
                                        </div>
                                        <div class="review-sub-btn">
                                            <button type="submit" class="t-y-btn t-y-btn-grey">发送留言</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 书籍信息主体部分 end -->

            <!-- 推荐书籍部分 start -->
            <section class="product__area box-plr-75 pb-20">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xxl-12">
                            <div class="section__head mb-40">
                                <div class="section__title">
                                    <h3>推荐<span>书籍</span></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xxl-12">
                            <div class="product__slider owl-carousel">
                                <div class="product__item white-bg mb-30" th:each="recemmendBook:${recommendBooks}">
                                    <div class="product__thumb p-relative">
                                        <a th:href="'http://huyulu666.top/item.html?bookId=' + ${recemmendBook.id}" class="w-img">
                                            <img th:src="${recemmendBook.defaultImagesUrl.get(0)}" alt="product"/>
                                            <img class="second-img" th:src="${recemmendBook.defaultImagesUrl.get(1)}" alt="product"/>
                                        </a>
                                        <div class="product__action p-absolute">
                                            <ul>
                                                <li><a href="javascript:;" title="添加到喜欢" th:onclick="addToLikes([[${recemmendBook.id}]])"><i class="fal fa-heart"></i></a></li>
                                                <li><a href="javascript:;" th:onclick="changeBookItemInfo([[${recemmendBook.id}]])" title="快速查看" data-bs-toggle="modal" data-bs-target="#productModalId"><i class="fal fa-search"></i></a></li>
                                                <li><a href="javascript:;" title="比较"><i class="far fa-sliders-h"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="product__content text-center">
                                        <h6 class="product-name">
                                            <a class="product-item-link" th:href="'http://huyulu666.top/item.html?bookId=' + ${recemmendBook.id}"
                                               th:text="${recemmendBook.bookName}"></a>
                                        </h6>
                                        <div class="rating">
                                            <ul>
                                                <li><a href="#"><i class="far fa-star"></i></a></li>
                                                <li><a href="#"><i class="far fa-star"></i></a></li>
                                                <li><a href="#"><i class="far fa-star"></i></a></li>
                                                <li><a href="#"><i class="far fa-star"></i></a></li>
                                                <li><a href="#"><i class="far fa-star"></i></a></li>
                                            </ul>
                                        </div>
                                        <span class="price" th:text="'￥'+${recemmendBook.bookPrice}"></span>
                                    </div>
                                    <div class="product__add-btn">
                                        <button type="button" style="font-weight: 700">添加到购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 推荐书籍部分 end -->

            <!-- brand area start -->
            <section class="brand__area">
                <div class="container custom-container">
                    <div class="row align-items-center">
                        <div class="col-xl-12">
                        <div class="brand__slider owl-carousel">
                            <div class="brand__item">
                            <img src="assets/img/brand/brand-1.jpg" alt="">
                            </div>
                            <div class="brand__item">
                            <img src="assets/img/brand/brand-2.jpg" alt="">
                            </div>
                            <div class="brand__item">
                            <img src="assets/img/brand/brand-3.jpg" alt="">
                            </div>
                            <div class="brand__item">
                            <img    src="assets/img/brand/brand-4.jpg" alt="">
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- brand area end -->

            <!-- 商品项的具体数据 start -->
            <div class="modal fade" id="productModalId" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered product__modal" role="document">
                    <div class="modal-content">
                        <!-- 商品项 -->
                        <div class="product__modal-wrapper p-relative">
                            <!-- 关闭按钮 -->
                            <div class="product__modal-close p-absolute">
                                <button data-bs-dismiss="modal"><i class="fal fa-times"></i></button>
                            </div>
                            <!-- 商品项主体 -->
                            <div class="product__modal-inner">
                                <div class="row">
                                    <!-- 左边图片部分 -->
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="product__modal-box">
                                            <div class="tab-content" id="modalTabContent">
                                            </div>
                                            <ul class="nav nav-tabs" id="modalTab" role="tablist">
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 右边文字部分 -->
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="product__modal-content">
                                            <!-- 商品标题 -->
                                            <h4 id="book_item_title"><a href="product-details.html"></a></h4>
                                            <!-- 商品描述 -->
                                            <div id="book_item_desc" class="product__modal-des mb-40">
                                                <p class="text-ellipsis"></p>
                                            </div>
                                            <!-- 书籍备注 -->
                                            <div id="book_item_remark" class="product__modal-des mb-40">
                                                <p></p>
                                            </div>
                                            <!-- 剩余商品数量 -->
                                            <div class="product__stock">
                                                <span>剩余数量：</span>
                                                <span id="book_item_count"></span>   <!-- 高亮 -->
                                            </div>
                                            <!-- 书籍类型 -->
                                            <div class="product__stock">
                                                <span>书籍类型：</span>
                                                <span id="book_item_type"></span>   <!-- 高亮 -->
                                            </div>
                                            <!-- 书籍新旧程度 -->
                                            <div class="product__stock mb-30">
                                                <span>新旧程度：</span>
                                                <span id="book_item_level"></span>   <!-- 高亮 -->
                                            </div>
                                            <!-- 评价 -->
                                            <div class="product__review d-sm-flex">
                                                <div class="rating rating__shop mb-15 mr-35">
                                                    <ul>
                                                        <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                        <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                        <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                        <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                        <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                                <div class="product__add-review mb-15">
                                                    <span><a href="javascript:;">1 条评论</a></span>
                                                    <span><a href="javascript:;">添加评论</a></span>
                                                </div>
                                            </div>
                                            <!-- 价格 -->
                                            <div class="product__price">
                                                <span id="book_item_price" style="color: red; font-weight: 700"></span>
                                                <span id="book_item_original_price"><del
                                                        style="color: #999999; font-size: small"></del></span>
                                            </div>
                                            <!-- 选择数量和添加购物车按钮 -->
                                            <div class="product__modal-form mb-30">
                                                <form action="http://huyulu666.top/addToCart.html">
                                                    <input id="product_add_id" name="bookId" type="text" value=""
                                                           style="display: none"/>
                                                    <div class="pro-quan-area d-lg-flex align-items-center">
                                                        <div class="product-quantity mr-20 mb-25">
                                                            <div id="product_add_info" class="cart-plus-minus p-relative">
                                                                <input name="count" type="text" value="1"/>
                                                            </div>
                                                        </div>
                                                        <div class="pro-cart-btn mb-25">
                                                            <button class="t-y-btn" type="submit">添加到购物车</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <!-- 商品项菜单：喜欢、比较、打印、分享 -->
                                            <div class="product__modal-links">
                                                <ul>
                                                    <li><a id="likeBook" href="javascript:;" title="添加到喜欢"><i class="fal fa-heart"></i></a>
                                                    </li>
                                                    <li><a href="javascript:;" title="比较"><i class="far fa-sliders-h"></i></a></li>
                                                    <li><a href="javascript:;" title="分享"><i class="fal fa-share-alt"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品项的具体数据 end -->

        </main>


		<!-- JS here -->
        <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
        <script src="assets/js/vendor/waypoints.min.js"></script>
        <script src="assets/js/bootstrap.bundle.min.js"></script>
        <script src="assets/js/meanmenu.js"></script>
        <script src="assets/js/slick.min.js"></script>
        <script src="assets/js/backToTop.js"></script>
        <script src="assets/js/jquery.fancybox.min.js"></script>
        <script src="assets/js/countdown.js"></script>
        <script src="assets/js/nice-select.min.js"></script>
        <script src="assets/js/isotope.pkgd.min.js"></script>
        <script src="assets/js/owl.carousel.min.js"></script>
        <script src="assets/js/magnific-popup.min.js"></script>
        <script src="assets/js/jquery-ui-slider-range.js"></script>
        <script src="assets/js/ajax-form.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/imagesloaded.pkgd.min.js"></script>
        <script src="assets/js/main.js"></script>
        <script type="text/javascript" th:inline="javascript">
            $(function () {
                // $("#productThumbTab li:first-child button").addClass("active");
                // $("#productThumbContent div:first-child").addClass("show").addClass("active");
                $("#productThumbTab").empty();
                $("#productThumbContent").empty();
                let images = [[${bookItem.bookImageList}]];
                console.log(images)
                for(let i = 0; i < images.length; i ++){
                    if (i == 0){
                        $("#productThumbTab").append(`
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="thumb1-tab" data-bs-toggle="tab" data-bs-target="#thumb1" type="button" role="tab"
                                    aria-controls="thumb1" aria-selected="true">
                                    <img src="${images[0]}" alt="" style="width: 100%">
                                </button>
                            </li>`);
                        $("#productThumbContent").append(`
                            <div class="tab-pane fade show active" id="thumb1" role="tabpanel" aria-labelledby="thumb1-tab">
                                <div class="product__details-nav-thumb">
                                    <img src="${images[0]}" alt="" style="width: 100%">
                                </div>
                            </div>`);
                    } else {
                        $("#productThumbTab").append(`
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="thumb${i+1}-tab" data-bs-toggle="tab" data-bs-target="#thumb${i+1}" type="button" role="tab"
                                    aria-controls="thumb${i+1}" aria-selected="false">
                                    <img src="${images[i]}" alt="" style="width: 100%">
                                </button>
                            </li>`);
                        $("#productThumbContent").append(`
                            <div class="tab-pane fade" id="thumb${i+1}" role="tabpanel" aria-labelledby="thumb${i+1}-tab">
                                <div class="product__details-nav-thumb">
                                    <img src="${images[i]}" alt="" style="width: 100%">
                                </div>
                            </div>`);
                    }
                }
            })

            //动态获取书籍详细信息后回填
            function changeBookItemInfo(id) {
                $.ajax({
                    type: "get",
                    // data : {'dbId':node.dbId,'viewId':node.id,'date':new Date()},
                    url: "http://huyulu666.top/item/" + id + ".html",
                    dataType: "json",

                    success: function (response) {
                        console.log(response);
                        $("#book_item_title a").text(response.bookName);    // 名称
                        $("#book_item_desc p").text(response.bookDesc);     // 描述
                        $("#book_item_remark p").text(response.remark);     // 备注
                        $("#book_item_count").text(response.bookCount + " 件");  // 库存
                        $("#book_item_type").text(response.bookTypeName);   // 类型
                        if (response.bookLevel == 10) $("#book_item_level").text("全新");  // 新旧程度
                        else $("#book_item_level").text(response.bookLevel + " 成新");
                        $("#book_item_price").text("￥" + response.bookPrice);  // 价格
                        $("#book_item_original_price del").text("￥" + response.bookOriginalPrice);  // 价格
                        // 设置书籍图片
                        $("#modalTabContent").empty();
                        $("#modalTab").empty();
                        $("#product_add_id").val(response.id);
                        for (let i = 0; i < response.imagesArray.length; i++) {
                            if (i == 0) {
                                $("#modalTabContent").append(`<div class="tab-pane fade show active" id="nav1" role="tabpanel" aria-labelledby="nav1-tab">
                            <div class="product__modal-img w-img book_item_image">
                                <img src="${response.imagesArray[0]}" alt="" width="100%" height="auto">
                            </div>
                        </div>`);
                                $("#modalTab").append(`<li class="nav-item" role="presentation">
                            <button class="nav-link active" id="nav1-tab" data-bs-toggle="tab"
                                data-bs-target="#nav1" type="button" role="tab" aria-controls="nav1"
                                aria-selected="true">
                            <img src="${response.imagesArray[0]}" alt="" width="85px">
                            </button>
                        </li>`);

                            } else {
                                $("#modalTabContent").append(`
                            <div class="tab-pane fade" id="nav${i + 1}" role="tabpanel" aria-labelledby="nav${i + 1}-tab">
                                <div class="product__modal-img w-img book_item_image">
                                    <img src="${response.imagesArray[i]}" alt="" width="100%" height="auto">
                                </div>
                            </div>
                        `);
                                $("#modalTab").append(`<li class="nav-item" role="presentation">
                            <button class="nav-link" id="nav1-tab" data-bs-toggle="tab"
                                data-bs-target="#nav${i + 1}" type="button" role="tab" aria-controls="nav${i + 1}"
                                aria-selected="true">
                            <img src="${response.imagesArray[i]}" alt="" width="85px">
                            </button>
                        </li>`);
                            }

                        }

                        $("#likeBook").off("click")
                        $("#likeBook").click(function () {
                            addToLikes(response.id);
                        })
                    },
                    error: function (data) {
                    }
                });
            }

            //添加到喜欢
            function addToLikes(bookId) {
                $.ajax({
                    type: "post",
                    data : {'bookId':bookId},
                    url: "http://huyulu666.top/addToLikes",
                    dataType: "json",

                    success: function (response) {
                        console.log(response)
                        if (response == true){
                            alert("添加成功")
                        } else {
                            alert("添加失败，书籍可能已存在于您的喜欢列表中")
                        }
                    },
                    error: function (data) {
                    }
                });
            }
        </script>
    </body>
</html>
